iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 8
1

昨天我們介紹了介面,並且使用下面這個例子。今天就要繼續使用下面這個例子來介紹類別。

interface Rectangle {
    width: number,
    length: number
}

let calculateArea(rectangle: Rectangle) => {
    // ...
}

calculateArea({
    width: 10,
    length: 12
})

在物件導向的世界裡有兩件很重要的規則,那就是 高內聚 以及 低耦合,在上面的範例中,介面只是很單存的宣告而已,它並不能包含實作,雖然我們也可以把計算面積的 function 加到 interface 裡面,但是,他最終還是需要一個類別來實作它。因此,我們可以直接用一個類別來表示這個長方形。

class Rectangle {
    width: number;
    length: number;

    calculateArea() {
        // 這裡我們先不計算面積,先把他列印出來看看
        console.log('width:' + this.width + ', length:' + this.length);
    }

    getDiffWith(rectangle: Rectangle) => {
        // ...
    }
}

使用類別的的方式就跟 CSharp 或 Java 很類似了,就直接 new 就可以了

let rectangle = new Rectangle();
rectangle.calculateArea();

想一想,上面的結果會是什麼呢?如果你還有印象,第三天在介紹型別的時候有稍微提到。

如果想快速的知道上面的結果會是什麼,可以將上面的程式碼存成一個 ts 檔案,假設我們把它存到 day06.ts , 接著我們就可以用下面的指令去編譯然後執行它:

$ tsc day06.ts # 這行是將 TypeScript 編譯成 JavaScript
$ node day06.js  # 由於編譯結果的檔案名稱會相同,所以這裡我們就可以用 node 直接執行它

這樣就會看見結果囉!正確答案明天公布!


上一篇
第07天-介面
下一篇
第09天-建構子(Constructor)與存取修飾符(Access modifier)
系列文
從零開始進入 JavaScript & TypeScript 的世界30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言